<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body {
            height: 100%;
            overflow: hidden;
        }
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        #root {
            width: 300px;
            height: 300px;
            background: lightblue;
        }
        #outer {
            width: 200px;
            height: 200px;
            background: lightgreen;
        }
        #inner {
            width: 100px;
            height: 100px;
            background: lightcoral;
        }
    </style>
</head>
<body>
    <div id="root" class="center">
        <div id="outer" class="center">
            <div id="inner" class="center"></div>
        </div>
    </div>
    <script>
        /*
            事件委托：利用事件的传播机制，实现的一套事件绑定处理方案
                例如： 一个容器中，有很多元素都要在点击的时候做一些事情
                    传统方案：
                        首先获取需要操作的元素，然后逐一做事件绑定，
                        弊端是：
                            当元素数量过多的时候，逐一为每个元素绑定事件处理函数，可能会影响页面性能，因为每个绑定都需要占用一定的内存和处理时间
                            代码冗余，维护困难
                    事件委托：
                        只需要给容器做一个事件绑定，因为点击内部的任何元素，根据事件冒泡传播机制，都会让容器的点击的事件也触发，
                        我们在这里根据事件源的不同做不同的处理
                        限制：
                            当前操作的事件必须支持冒泡传播机制才行
                            例如：mouseenter/mouseleave等事件是没有冒泡传播机制的
                            如果单独的事件绑定中，做了事件传播机制的阻止，那么事件委托中的操作也不会生效了

        */
        const body = document.body, 
            root = document.querySelector('#root'),
            outer = document.querySelector('#outer'),
            inner = document.querySelector('#inner');
        body.addEventListener('click', function (ev) {
            let target = ev.target,
                id = target.id;
            const handlers = new Map([
                ['root', function() {
                    console.log('root');
                }],
                ['outer', function() {
                    console.log('outer');
                }],
                ['inner', function() {
                    console.log('inner');
                }],
            ]);
            const defaultHandler = function() {
                console.log('default');
            };
            handlers.get(id) ? handlers.get(id)() : defaultHandler();
        });
    </script>
</body>
</html>